[CSS] 변수 선언 및 사용하는 방법, var()

CSS에서 변수를 선언하여 사용하는 방법에 대하여 알아보려고 합니다.

# CSS에서 변수 사용하기

전처리기 sass, scss를 사용하는 경우 변수 사용이 가능하지만 단지 css만 사용하는 경우 변수를 선언하고 사용하는 것이 가능할까요? 물론 가능합니다. 다만 예전에는 IE를 지원하지 않았기 때문에 널리 사용되지 않았지만 현재는 IE를 제외한 대부분의 메이저 브라우저에 지원하므로 많이 사용되고 있습니다.

그럼 먼저 사용하는 방법에 대하여 간단하게 알아봅니다. 이 때 변수를 선언하는 부분과 사용하는 부분으로 구분할 수 있는데요 먼저 변수 선언 방법입니다.

! css 변수 선언하는 방법

가장 먼저 변수를 선언하기 위해서는 해당하는 블럭 안에 --(double dashes)를 사용합니다. 즉 아래와 같이 변수를 선언할 수 있습니다.


이 경우 --red 이름의 새로운 변수가 선언되었습니다. 이제 선언된 변수를 원하는 다른 곳에서 사용할 수 있죠. 다만 선언된 변수는 두 가지 스코프 영역을 가지는데 전역과 로컬입니다. 위의 예는 로컬 영역에 선언되었으므로 다른 곳에서 --red 변수를 사용하기 어렵습니다. 추가로 대소문자를 구분(case-sensitive)하기 때문에 주의하여 사용하도록 합니다.


@ css 전역 스코프 영역에 변수(global scope)를 사용하기
전역 변수로 선언하여 사용하기 위해서는 :root 선택자를 사용하면 됩니다. 이 경우 모든 문서 안에서 변수를 가져와 사용하는 것이 가능합니다.

이처럼 css 변수를 선언하여 사용하는 경우 전역으로 선언하여 많이 사용됩니다. 아무래도 웹사이트 전체에서 접근해 사용하는 것이 편리하기 때문입니다.

! css 변수 사용하는 방법

다음으로 선언된 css 변수를 사용하는 방법을 알아봅니다. 이 경우 var()를 사용하도록 합니다.

var(--name, fallback)


위에 사용된 두 값은 각각 다음과 같습니다.
--name // [필수] 사용할 변수의 이름
fallback // [선택] 선언된 변수가 없는 경우 적용 할 값이처럼 두 가지 값이 필요한데 fallback 값은 없어도 무방합니다. 다만 값이 없는 경우의 default 값을 적용하려면 추가하는 것이 좋습니다.

이제 간단한 예제를 만들고 적용해보도록 하겠습니다. 아래 소스 코드를 봐주세요.

먼저 greet 그리고 name 클래스명을 가진 두 개의 태그 요소를 하나의 문서에 추가하였습니다. 이제 변수를 사용하여 스타일을 적용해보려고 합니다. 먼저 :root 전역 선택자를 사용하여 몇 가지 색상에 대한 스타일을 미리 다음과 같이 변수에 적용하였습니다.

이제 greet로 적용된 부분은 빨간색으로 나타날 것이며 .name 클래스를 사용한 곳은 녹색으로 출력될 것입니다. 위 코드를 실행한 결과는 아래와 같습니다.



보시는 것처럼 예상된 색상이 적용되어 나타나게 됩니다.

여기까지 css를 사용하여 변수를 선언하고 사용하는 방법에 대하여 간략하게 알아보았습니다.